import type { Test } from "@server/src/schemas/tests";
import type { Table } from "@tanstack/react-table";
import { Input } from "@/components/ui/input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

export function TestsFilter({ table }: { table: Table<Test> }) {
  return (
    <div className="grid w-full grid-cols-4 items-center gap-2">
      <Input
        id="name"
        className="col-span-2 placeholder:font-light placeholder:opacity-50"
        placeholder="name"
        value={(table.getColumn("name")?.getFilterValue() as string) ?? ""}
        onChange={(event) => table.getColumn("name")?.setFilterValue(event.target.value)}
      />
      <Select
        value={(table.getColumn("issue")?.getFilterValue() as string) ?? ""}
        onValueChange={(value) =>
          table.getColumn("issue")?.setFilterValue(value === "all" ? "" : value)
        }
      >
        <SelectTrigger className="w-full">
          <SelectValue placeholder="issue" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="all">all</SelectItem>
          <SelectItem value="bug">bug</SelectItem>
          <SelectItem value="script">script</SelectItem>
          <SelectItem value="env">env</SelectItem>
          <SelectItem value="undo">undo</SelectItem>
        </SelectContent>
      </Select>
      <Select
        value={(table.getColumn("owner")?.getFilterValue() as string) ?? ""}
        onValueChange={(value) =>
          table.getColumn("owner")?.setFilterValue(value === "all" ? "" : value)
        }
      >
        <SelectTrigger className="w-full">
          <SelectValue placeholder="owner" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="all">all</SelectItem>
          <SelectItem value="chaocw">chaocw</SelectItem>
          <SelectItem value="John Doe">John Doe</SelectItem>
        </SelectContent>
      </Select>
    </div>
  );
}
